<template>
    <Header title='JD商城' class="headerColor">
        <template #left>
            <van-icon name="arrow-left" @click="tobackFn"/>
        </template>
        <!-- 搜索 -->
        <template #title>
            <van-search shape="round" v-model="searchText" background="#c72418" placeholder="请输入搜索关键词" />
        </template>
        <template #right> 
            <van-button type:success size="small" @click="searchContentFn">搜索</van-button>
        </template>
    </Header>
    <!-- 相关搜索以及历史记录 -->
            <!--没有文本内容时候显示这个历史记录  -->
        <SearchHot v-if='!searchText'></SearchHot>   
     <!--搜索列表  -->
             <!-- 有内容时候显示这个商品列表 -->
            <SearchList v-else></SearchList> 
</template>
   
<script lang="ts" setup>
import SearchHot from './components/SearchHot.vue'
import SearchList from './components/SearchList.vue'
import {useRouter , type Router} from 'vue-router'
import {HotwordApi , SearchListApi} from '@/api/goods'
import {ref , provide , watch} from 'vue'
import type {MyMiaoSaItem} from '@/config/interface'
import router from '@/router';

const $router:Router = useRouter()

//返回上一级
const tobackFn = ()=>{
    router.go(-1)
}


// 准备一个数据 , 用来做搜索使用,需要双向数据绑定
const searchText  = ref<string>('')
const searchContentFn = ()=>{
    //searchText.value  获取到的是输入框输入的内容
    const text = searchText.value.trim()  //  trim去掉首位空格
    //非空验证
    if(!text) return
    //跳转路由
    $router.push({ path: '/goodslist', query: { search: text } })
}

//准备一个数据，表示搜索列表
const searchList  = ref<MyMiaoSaItem[]>([])
//搜素请求数据 ， 利用watch
watch(searchText , async ()=>{
    if(!searchText.value.trim()) return   //是空的话啥也不做
    //执行到这里就是有内容，进行请求
    const res = await SearchListApi(searchText.value.trim())
    searchList.value = res.data
    console.log(121,res);
}) 
provide('searchList' , searchList)


</script>
<style scoped lang="scss">

</style>